﻿<!DOCTYPE html>
<html ng-app="hrApp">
<head>
    <title>HR App</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var hrApp = angular.module('hrApp', [])
            .controller("EmployeeCtrl", function ($scope) {
                $scope.newEmployee = {};

                $scope.cities = [{ id: 1, name: "北京" }, { id: 2, name: "上海" },
                                { id: 3, name: "深圳" }, { id: 4, name: "广州" }];
                $scope.skills = [{ id: 1, name: "C" }, { id: 2, name: "C++" },
                                 { id: 3, name: "C#" }, { id: 4, name: "Java" },
                                 { id: 5, name: "JavaScript" }, { id: 6, name: "Python" }];

                $scope.checkSkill = function (skill) {
                    skill.checked = !skill.checked;

                    var selectedSkills = [];
                    for (var i = 0; i < $scope.skills.length; i++) {
                        if ($scope.skills[i].checked) {
                            selectedSkills.push($scope.skills[i]);
                        }
                    }
                    if (selectedSkills.length > 0)
                        $scope.newEmployee.skills = angular.toJson(selectedSkills);
                    else
                        $scope.newEmployee.skills = "";
                };

                $scope.register = function (newEmployee, valid) {
                    if (valid) {
                        newEmployee.skills = angular.fromJson(newEmployee.skills);
                        alert("添加成功，内容为：" + angular.toJson(newEmployee));
                    }
                };
            });
    </script>
    <style>
        .error {
            color:red;
        }
    </style>
</head>
<body ng-controller="EmployeeCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                员工注册
            </h1>
        </div>
        <form name="registerForm" novalidate ng-submit="register(newEmployee, registerForm.$valid)">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-3 control-label">员工编号：</label>
                    <div class="col-md-6">
                        <input name="employeeID" class="form-control"
                               ng-model="newEmployee.id"
                               required
                               ng-pattern="'^\\d{5}$'" />
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.employeeID.$error.required">
                            *
                        </span>
                        <span ng-show="registerForm.employeeID.$error.pattern">
                            编号必须是5位数字
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">员工姓名：</label>
                    <div class="col-md-6">
                        <input name="employeeName" class="form-control"
                               ng-model="newEmployee.name" required />
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.employeeName.$error.required">
                            *
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">账号名：</label>
                    <div class="col-md-6">
                        <input name="accountName" class="form-control"
                               ng-model="newEmployee.account" required
                               ng-minlength="6" ng-maxlength="20" />
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.accountName.$error.required">
                            *
                        </span>
                        <span ng-show="registerForm.accountName.$error.minlength ||
                                       registerForm.accountName.$error.maxlength">
                            账号名长度为6~20
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">性别：</label>
                    <div class="col-md-6">
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="0" ng-model="newEmployee.gender" required />女
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="1" ng-model="newEmployee.gender" required />男
                        </label>
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.gender.$error.required">
                            *
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">电子邮件：</label>
                    <div class="col-md-6">
                        <input name="email" type="email" class="form-control" ng-model="newEmployee.email" required />
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.email.$error.required">
                            *
                        </span>
                        <span ng-show="registerForm.email.$error.email">
                            电子邮件格式错误
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">出生日期：</label>
                    <div class="col-md-6">
                        <input name="birthday" type="date" class="form-control" ng-model="newEmployee.birthday" required />
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.birthday.$error.required">
                            *
                        </span>
                        <span ng-show="registerForm.birthday.$error.date">
                            日期格式错误
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">工作地点：</label>
                    <div class="col-md-6">
                        <select name="city" class="form-control"
                                required ng-model="newEmployee.city"
                                ng-options="city.id as city.name for city in cities">
                            <option value="">选择工作地点</option>
                        </select>
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.city.$error.required">
                            *
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">技能</label>
                    <div class="col-md-6">
                        <label class="checkbox-inline" ng-repeat="skill in skills">
                            <input type="checkbox" name="skills" ng-click="checkSkill(skill)" />{{skill.name}}
                        </label>
                        <input type="hidden" ng-model="newEmployee.skills" required name="skills" />
                    </div>
                    <div class="form-control-static error">
                        <span ng-show="registerForm.skills.$error.required">
                            *
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-3">
                        <button class="btn btn-primary" type="submit" ng-disabled="registerForm.$invalid">
                            注册
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
